import PropTypes from 'prop-types'
import React, { memo, useRef, useState } from 'react'
import Rating from '@mui/material/Rating'
import { Carousel } from 'antd'

import { ItemWrapper } from './styles'
import IconArrowLeft from '@/assets/svg/icon_arrow_left'
import IconArrowRight from '@/assets/svg/icon_arrow_right'
import Indicator from '@/base-ui/indicator'
import classNames from 'classnames'

const RoomItem = memo((props) => {
  const { itemData, itemWidth, itemClick } = props
  const carouselRef = useRef()
  const [curIndex, setCurrentIndex] = useState(0)

  function controlClickHandle (e, toRight) {
    e.stopPropagation()
    toRight ? carouselRef.current.next() : carouselRef.current.prev()
  }

  function beforeChange (from, to) {
    setCurrentIndex(to)
  }

  const picElement = (
    <div className="cover">
      <img src={itemData.picture_url} alt="" />
    </div>
  )

  const swiperElement = (
    <div className="swiper">
        <div className="control">
          <div className="btn left" onClick={e => controlClickHandle(e, false)}>
            <IconArrowLeft width='24' height='24' />
          </div>
          <div className="btn right" onClick={e => controlClickHandle(e, true)}>
            <IconArrowRight width='24' height='24' />
          </div>
        </div>
        <div className="indicator">
          <Indicator curIndex={curIndex}>
            {
              itemData.picture_urls?.map((item, index) => {
                return (
                  <span
                    className={classNames("dots",
                      {
                        "active": index === curIndex,
                        "near3": (index === curIndex - 3 || index === curIndex + 3) && (curIndex >= 3 && curIndex <= itemData.picture_urls.length - 4)
                      }
                    )}
                    key={index}
                  ></span>
                )
              })
            }
          </Indicator>
        </div>
        <Carousel dots={false} beforeChange={beforeChange} ref={carouselRef}>
          {
            itemData.picture_urls?.map((item) => {
              return (
                <div className="cover" key={item}>
                  <img src={item} alt="" />
                </div>
              )
            })
          }
        </Carousel>
    </div>
  )

  return (
    <ItemWrapper
      verifyColor={itemData?.verify_info?.text_color || '#39576a'}
      itemWidth={itemWidth}
      onClick={e => itemClick(itemData)}
    >
      <div className="inner">
        {/* 判断展示图片还是轮播图 */}
        { !itemData.picture_urls ? picElement : swiperElement }
        <div className="desc"
            style={{ color: itemData.verify_info.text_color }}
        >
          {itemData.verify_info.messages.join(' · ')}
        </div>
        <div className="name">{itemData.name}</div>
        <div className="price">￥ {itemData.price}/晚</div>
        <div className="bottom">
          <Rating
            value={ itemData.star_rating ?? 5 }
            precision={0.1}
            sx={{ fontSize: '12px', color: '#008489' }}
          />
          <span className="bottom-info">{itemData.reviews_count}
            {itemData.bottom_info?.content ? ` · ${itemData.bottom_info.content}` : ''}
          </span>
        </div>
      </div>
    </ItemWrapper>
  )
})

RoomItem.propTypes = {
  itemData: PropTypes.object
}

export default RoomItem
